import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Page {
    id: root
    title: "阴影和明暗颜色"
    
    SystemPalette {
        id: systemPalette
        colorGroup: SystemPalette.Active
    }
    
    ScrollView {
        id: scrollView
        anchors.fill: parent
        contentWidth: availableWidth
        
        ColumnLayout {
            anchors.horizontalCenter: parent.horizontalCenter
            width: Math.min(parent.width - 40, 400)
            Layout.fillWidth: true
            spacing: 20
            
            Item { height: 10 }
            
            Label {
                text: "阴影和明暗颜色展示"
                font.pixelSize: 18
                font.bold: true
                Layout.fillWidth: true
                horizontalAlignment: Text.AlignHCenter
            }
            
            // 明暗色展示区域
            GridLayout {
                Layout.fillWidth: true
                columns: 2
                columnSpacing: 20
                rowSpacing: 20
                
                // 明亮色 (light)
                Rectangle {
                    Layout.fillWidth: true
                    height: 100
                    color: "white"
                    border.width: 1
                    border.color: systemPalette.mid
                    
                    ColumnLayout {
                        anchors.centerIn: parent
                        spacing: 10
                        
                        Text {
                            text: "明亮色 (light)"
                            font.pixelSize: 14
                            Layout.alignment: Qt.AlignHCenter
                        }
                        
                        Rectangle {
                            Layout.preferredWidth: 100
                            Layout.preferredHeight: 30
                            color: systemPalette.light
                            Layout.alignment: Qt.AlignHCenter
                        }
                        
                        Text {
                            text: "#" + systemPalette.light.toString().substring(1)
                            font.family: "Courier"
                            Layout.alignment: Qt.AlignHCenter
                        }
                    }
                }
                
                // 中亮色 (midlight)
                Rectangle {
                    Layout.fillWidth: true
                    height: 100
                    color: "#e3e3e3"
                    border.width: 1
                    border.color: systemPalette.mid
                    
                    ColumnLayout {
                        anchors.centerIn: parent
                        spacing: 10
                        
                        Text {
                            text: "中亮色 (midlight)"
                            font.pixelSize: 14
                            Layout.alignment: Qt.AlignHCenter
                        }
                        
                        Rectangle {
                            Layout.preferredWidth: 100
                            Layout.preferredHeight: 30
                            color: systemPalette.midlight
                            Layout.alignment: Qt.AlignHCenter
                        }
                        
                        Text {
                            text: "#" + systemPalette.midlight.toString().substring(1)
                            font.family: "Courier"
                            Layout.alignment: Qt.AlignHCenter
                        }
                    }
                }
                
                // 中色 (mid)
                Rectangle {
                    Layout.fillWidth: true
                    height: 100
                    color: "#a0a0a0"
                    border.width: 1
                    border.color: systemPalette.mid
                    
                    ColumnLayout {
                        anchors.centerIn: parent
                        spacing: 10
                        
                        Text {
                            text: "中色 (mid)"
                            font.pixelSize: 14
                            Layout.alignment: Qt.AlignHCenter
                            color: "white"
                        }
                        
                        Rectangle {
                            Layout.preferredWidth: 100
                            Layout.preferredHeight: 30
                            color: systemPalette.mid
                            Layout.alignment: Qt.AlignHCenter
                        }
                        
                        Text {
                            text: "#" + systemPalette.mid.toString().substring(1)
                            font.family: "Courier"
                            color: "white"
                            Layout.alignment: Qt.AlignHCenter
                        }
                    }
                }
                
                // 暗色 (dark)
                Rectangle {
                    Layout.fillWidth: true
                    height: 100
                    color: "#696969"
                    border.width: 1
                    border.color: systemPalette.mid
                    
                    ColumnLayout {
                        anchors.centerIn: parent
                        spacing: 10
                        
                        Text {
                            text: "暗色 (dark)"
                            font.pixelSize: 14
                            Layout.alignment: Qt.AlignHCenter
                            color: "white"
                        }
                        
                        Rectangle {
                            Layout.preferredWidth: 100
                            Layout.preferredHeight: 30
                            color: systemPalette.dark
                            Layout.alignment: Qt.AlignHCenter
                        }
                        
                        Text {
                            text: "#" + systemPalette.dark.toString().substring(1)
                            font.family: "Courier"
                            color: "white"
                            Layout.alignment: Qt.AlignHCenter
                        }
                    }
                }
            }
            
            // 阴影色展示
            Rectangle {
                Layout.fillWidth: true
                Layout.preferredHeight: 150
                color: "white"
                border.width: 1
                border.color: systemPalette.mid
                
                ColumnLayout {
                    anchors.centerIn: parent
                    spacing: 15
                    
                    Text {
                        text: "阴影色 (shadow)"
                        font.pixelSize: 14
                        Layout.alignment: Qt.AlignHCenter
                    }
                    
                    // 阴影效果演示
                    Item {
                        Layout.preferredWidth: 200
                        Layout.preferredHeight: 60
                        Layout.alignment: Qt.AlignHCenter
                        
                        Rectangle {
                            anchors.fill: parent
                            color: "white"
                            border.width: 1
                            border.color: systemPalette.mid
                            z: 1
                        }
                        
                        Rectangle {
                            width: parent.width
                            height: parent.height
                            x: 4
                            y: 4
                            color: systemPalette.shadow
                            opacity: 0.3
                        }
                    }
                    
                    Text {
                        text: "#" + systemPalette.shadow.toString().substring(1)
                        font.family: "Courier"
                        Layout.alignment: Qt.AlignHCenter
                    }
                }
            }
            
            // 3D按钮效果示例
            Rectangle {
                Layout.fillWidth: true
                Layout.preferredHeight: 180
                color: "white"
                border.width: 1
                border.color: systemPalette.mid
                
                ColumnLayout {
                    anchors.centerIn: parent
                    spacing: 20
                    
                    Text {
                        text: "使用明暗色创建3D按钮效果"
                        font.pixelSize: 14
                        Layout.alignment: Qt.AlignHCenter
                    }
                    
                    RowLayout {
                        spacing: 40
                        Layout.alignment: Qt.AlignHCenter
                        
                        // 凸起按钮
                        Rectangle {
                            width: 120
                            height: 60
                            color: systemPalette.button
                            border.width: 1
                            border.color: systemPalette.mid
                            
                            Rectangle {
                                width: parent.width
                                height: 2
                                color: systemPalette.light
                                anchors.top: parent.top
                            }
                            
                            Rectangle {
                                width: 2
                                height: parent.height
                                color: systemPalette.light
                                anchors.left: parent.left
                            }
                            
                            Rectangle {
                                width: parent.width
                                height: 2
                                color: systemPalette.dark
                                anchors.bottom: parent.bottom
                            }
                            
                            Rectangle {
                                width: 2
                                height: parent.height
                                color: systemPalette.dark
                                anchors.right: parent.right
                            }
                            
                            Text {
                                anchors.centerIn: parent
                                text: "凸起按钮"
                            }
                        }
                        
                        // 凹陷按钮
                        Rectangle {
                            width: 120
                            height: 60
                            color: systemPalette.button
                            border.width: 1
                            border.color: systemPalette.mid
                            
                            Rectangle {
                                width: parent.width
                                height: 2
                                color: systemPalette.dark
                                anchors.top: parent.top
                            }
                            
                            Rectangle {
                                width: 2
                                height: parent.height
                                color: systemPalette.dark
                                anchors.left: parent.left
                            }
                            
                            Rectangle {
                                width: parent.width
                                height: 2
                                color: systemPalette.light
                                anchors.bottom: parent.bottom
                            }
                            
                            Rectangle {
                                width: 2
                                height: parent.height
                                color: systemPalette.light
                                anchors.right: parent.right
                            }
                            
                            Text {
                                anchors.centerIn: parent
                                text: "凹陷按钮"
                            }
                        }
                    }
                }
            }
            
            Item { height: 20 }
        }
    }
} 
